<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>11_高阶函数_函数柯里化</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel">
        class CountParent extends React.Component {
            state = {
                init: 0
            }
            resetSon = () => {
                this.setState({ init: 0 })
            }
            render() {
                return <div>
                    <button onClick={this.resetSon} >重置</button>
                    <br />
                    <br />
                    <Count init={this.state.init} />
                </div>
            }
        }
        //1 创建类式组件
        class Count extends CountParent {
            initState = () => {
                console.log("初始化字段")
                return 0;
            }
            state = {
                count: this.initState()
            }
            constructor(props) {
                super(props)
                console.log("Count--constructor")
            }
            //第一次不算，以后每次才算
            UNSAFE_componentWillReceiveProps() {
                console.log("Count--UNSAFE_componentWillReceiveProps")
                this.setState({ count: this.props.init })
            }
            UNSEAF_componentWillMount() {
                console.log("Count--UNSEAF_componentWillMount")
            }

            render() {
                console.log("Count--render")
                return (
                    <div >
                        count:{this.state.count}
                        <br />
                        <button onClick={this.add}>点击+1</button>
                        <button onClick={this.force}>不修改State强制更新</button>
                    </div>
                )
            }
            //在这个钩子中做一 些初始化的事，例如:开后定时器、发送网络请求、订阅消息
            componentDidMount() {
                console.log("Count--componentDidMount")
            }
            add = () => {
                console.log("Count--调用setState")
                let { count } = this.state
                this.setState({ count: count + 1 })
            }
            force = () => {
                this.forceUpdate()
            }
            forceUpdate() {
                console.log("Count--forceUpdate")
            }
            shouldComponentUpdate() {
                console.log("Count--shouldComponentUpdate")
                return true
            }
            UNSAFE_componentWillUpdate() {
                console.log("Count--UNSAFE_componentWillUpdate")
            }
            componentDidUpdate() {
                console.log("Count--componentDidUpdate")
            }
        }
        //2 渲染组件到页面 
        ReactDOM.render(<CountParent />, document.getElementById('test'))

    </script>
</body>

</html>